<template>
	<div>
		<Modal v-model="data.isShow" width="500">
			<p slot="header" style="font-size: .14rem;color: #8B7B83;">
				<span>新建客存</span>
			</p>
			<div>
				<Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="90">
                    <FormItem label="姓名：" prop="name">
                        <Input v-model="data.data.name" placeholder="姓名" class="input"></Input>
                    </FormItem>
                    <FormItem label="电话：" prop="phoneNum">
                        <Input v-model="data.data.phoneNum" placeholder="电话" class="input"></Input>
                    </FormItem>
                    <FormItem label="客存地址：" prop="storeHouseId">
                        <Select v-model="data.data.storeHouseId" placeholder="请选择客存地址">
                            <Option v-for="item in data.storeList" :value="item.sid" :key="item.sid">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="描述：" prop="remark">
                        <Input v-model="data.data.remark" placeholder="请输入描述" class="input"></Input>
                    </FormItem>
				</Form>
                <div class="product-view">
                    <table style="width:100%;">
						<tr>
							<td style="width:1.5rem;">商品条形码</td>
							<td>商品名称</td>
							<td style="width:1rem;">存储数量</td>							
							<td style="width:.6rem">
								<span class="btn" @click="clickAdd">
									<Icon type="plus-round"></Icon>
								</span>
							</td>
						</tr>
						<tr v-for="(item, index) in data.data.pros">
							<td>
								<Input v-model="item.productBar" placeholder="请输入条形码" class="input" @on-blur="onBlur(item)"></Input>
							</td>
							<td>{{item.productName}}</td>
							<td><InputNumber :min="1" v-model="item.number" placeholder="存储数量"></InputNumber></td>
							<td>
								<span class="btn" @click="clickDel(item, index)">
									<Icon type="minus-round"></Icon>
								</span>
							</td>
						</tr>
					</table>
                </div>
			</div>
			<div slot="footer">
                <Button type="primary" :loading="data.isLoading" @click="clickSubmit">新建</Button>
                <Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
export default {
    props: ['data'],
	data() {
		return {
			ruleValidate: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				],
				phoneNum: [
					{ required: true, message: '请输入新手机号', trigger: 'blur' },
                    { pattern: phoneReg, message: '请正确输入手机号', trigger: 'blur' }
                ],
				storeHouseId: [
					{ required: true, message: '请选择入库地址', trigger: 'change', type: 'string' }
				],
			},
		}
    },
    mounted() {
        
    },
	methods: {
		clickAdd() {
			this.$emit('on-click-add')
		},
		clickDel(item, index) {
			this.$emit('on-click-del', item, index)
		},
		onBlur(item) {
			this.$emit('on-blur', item);
		},
		clickSubmit() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					let flag = true;
					let data = this.data.data.pros;
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						if (item.productBar == '') {
							this.$Message.error('请填写条形码关联商品')
							flag = false;
						} else if (item.price == 0 && item.price == '' && item.price == null) {
							this.$Message.error('请填写商品采购单价')
							flag = false;
						}
					}
					if (flag) {
						this.$emit('on-submit', this.data);
					}
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.product-view {
	position: relative;
	.pro-item {
		width: 95%;
		display: flex;
		align-items: center;
		margin-bottom: .2rem;
	}
	.btn {
		display: inline-block;
		width: .2rem;
		height: .2rem;
		background: #E31673;
		text-align: center;
		line-height: .2rem;
		color: #ffffff;
		border-radius: 50%;
		cursor: pointer;
	}
	.del {
		display: inline-block;
		width: .2rem;
		height: .2rem;
		background: #E31673;
		text-align: center;
		line-height: .2rem;
		color: #ffffff;
		border-radius: 50%;
		cursor: pointer;
	}
	table {
		width: 100%;
			border: 1px solid #F1C7DA;
		td {
			height: .5rem;
			text-align: center;
			border: 1px solid #F1C7DA;
			padding: 0 .1rem;
			
		}
    }
    
}
.input {
    border: 1px solid #D5CED2;
    border-radius: 5px;
}
</style>